<template>
  <!-- <div class="headerBox" :class="isFixed?'isFixed':''"> -->
  <div class="headerBox">
    <div class="logoItem" @click="jumpToIndex">
      <img src="../assets/logo/logo.png" alt="">
    </div>
    <div class="search">
      <div class="searchItem border-r boxS-i-4 flex-n-center">
        <!-- <i class="el-icon-search"></i> -->
        <img src="../assets/icon/search.svg" alt="" class="searchItemImg">
        <!-- <span class="color-9e">{{$t('header.searchText')}}</span> -->
        <input type="text" :placeholder="$t('header.searchText')" class="color-0 font-14" id="" v-model="searchWord"  @keydown.enter="jumpPath">
      </div>
      <div class="searchResult border-r bg-f">
        <div class="search_item bd_b-2_d8 flex-n-center">
          <div class="search_img">
            <img class="radius-50 mg-0" src="../assets/img/img_a84@1x.png" alt="">
          </div>
          <div class="searchDetail flex-1 flex-s-between mgr-20">
            <div class="searchname font-14 fontW-b">YYfancy</div>
            <div class="searchNum fontW-b">1068 items</div>
          </div>
        </div>
        <div class="search_item bd_b-2_d8 flex-n-center">
          <div class="search_img">
            <img class="radius-50 mg-0" src="../assets/img/img_a84@1x.png" alt="">
          </div>
          <div class="searchDetail flex-1 flex-s-between mgr-20">
            <div class="searchname font-14 fontW-b">YYfancy</div>
            <div class="searchNum fontW-b">1068 items</div>
          </div>
        </div>
        <div class="search_item bd_b-2_d8 flex-n-center">
          <div class="search_img">
            <img class="radius-50 mg-0" src="../assets/img/img_a84@1x.png" alt="">
          </div>
          <div class="searchDetail flex-1 flex-s-between mgr-20">
            <div class="searchname font-14 fontW-b">YYfancy</div>
            <div class="searchNum fontW-b">1068 items</div>
          </div>
        </div>
        <div class="search_item bd_b-2_d8 flex-n-center">
          <div class="search_img">
            <img class="radius-50 mg-0" src="../assets/img/img_a84@1x.png" alt="">
          </div>
          <div class="searchDetail flex-1 flex-s-between mgr-20">
            <div class="searchname font-14 fontW-b">YYfancy</div>
            <div class="searchNum fontW-b">1068 items</div>
          </div>
        </div>
      </div>
    </div>
    <div class="navItem">
      <div class="navitem" :class="item.id === 2? 'navPo':''" v-for="item in navList" :key="item.id" @click.stop="jumpTo(item)">{{$t(item.name)}}
        <div class="navList border-3 bd-r-b bg-32 pd-5" v-if="item.id === 2" v-show="showNav">
          <div class="item_nav font-14 fontW-9 font-f-ib bd_b-2_d8" v-for="item in navItem" :key="item.id" @click.stop="navJumpTo(item)">{{$t(item.name)}}</div>
        </div>
      </div>
    </div>
    <div class="walletBox">
      <div class="walletitem" @click.stop="connectWallet">
        <img src="../assets/icon/wallet.svg" alt="">
      </div>
    </div>
    <el-drawer
      :visible.sync="drawer"
      :with-header="false">
      <wallet @changeDrawerStatus="changeDrawerStatus"/>
    </el-drawer>
  </div>
</template>
<script>
import wallet from './component/Wallet'
import { MessagePormpt } from '../Js/common'
var navlist = [
  {id: 0, name: 'header.nav_explore'},
  {id: 1, name: 'header.nav_derivatives'},
  {id: 2, name: 'header.nav_function'},
  {id: 3, name: 'header.nav_create'}
]
var navItem = [
  {id: 0, name: 'header.nav_item_watermark'}, // 隐形水印
  {id: 1, name: 'header.nav_item_rank'}, // 排名
  {id: 2, name: 'header.nav_item_activity'}, // 活动
  {id: 3, name: 'header.nav_item_broker'}, // 经纪人
  {id: 4, name: 'header.nav_item_collection'}, // 合集管理
  {id: 5, name: 'header.nav_item_helpcenter'} // 帮助中心
]
export default {
  components: {
    wallet
  },
  data () {
    return {
      navList: navlist,
      navItem: navItem,
      drawer: false,
      showNav: false,
      isFixed: false,
      searchWord: '',
      langType: localStorage.getItem('language')
    }
  },
  mounted () {
    window.addEventListener('scroll', this.onSroll)
  },
  methods: {
    connectWallet: function () {
      this.drawer = !this.drawer
    },
    jumpToIndex: function () {
      this.$router.replace({
        path: '/'
      })
    },
    jumpTo: function (item) {
      console.log(item, this.langType)
      this.showNav = false
      if (item.id === 1) {
        let langObj = {
          zh_cn: '这是一条消息提示',
          en: 'This is a message prompt',
          ru: 'это сообщение',
          zh_tw: '這是一條提示訊息'
        }
        MessagePormpt(this.langType, langObj)
        return
      }
      let path = ''
      if (item.id === 0) {
        path = '/explore'
      } else if (item.id === 2) {
        this.showNav = !this.showNav
        return
      } else if (item.id === 3) {
        path = '/mint_imeet'
      } else {
        path = '/'
      }
      this.$router.replace({
        path: path
      })
    },
    // {id: 0, name: 'header.nav_item_watermark'}, // 隐形水印
    // {id: 1, name: 'header.nav_item_rank'}, // 排名
    // {id: 2, name: 'header.nav_item_activity'}, // 活动
    // {id: 3, name: 'header.nav_item_broker'}, // 经纪人
    // {id: 4, name: 'header.nav_item_collection'}, // 合集管理
    // {id: 5, name: 'header.nav_item_helpcenter'} // 帮助中心
    navJumpTo: function (item) {
      console.log(item, 'llll')
      this.showNav = !this.showNav
      if (item.id === 5) {
        window.open('http://imeetnft.io:8181/docs/test', '_blank')
        return
      }
      let path = '/'
      if (item.id === 0) {
        path = '/watermark'
      }
      if (item.id === 1) {
        path = '/ranking'
      }
      if (item.id === 2) {
        path = '/home_function'
      }
      if (item.id === 3) {
        path = '/'
      }
      if (item.id === 4) {
        path = '/'
      }
      this.$router.push({
        path: path
      })
    },
    changeDrawerStatus: function (status) {
      this.drawer = status
    },
    onSroll: function () {
      var scrollTop = 0
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop
      } else if (document.body) {
        scrollTop = document.body.scrollTop
      }
      if (scrollTop > 70) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    },
    jumpPath: function () {
      if (this.searchWord === '') {
        let langObj = {
          zh_cn: '请输入搜索内容',
          en: 'Enter search content',
          ru: 'Введите содержание поиска',
          zh_tw: '請鍵入搜索內容'
        }
        MessagePormpt(this.langType, langObj)
        return
      }
      this.$router.push({
        path: '/search',
        query: {searchWord: this.searchWord}
      })
    }
  },
  beforeRouteLeave(to, from, next) {
    // 离开路由前清空onscroll的所有监听内容
    window.onscroll = () => {
      console.log('window onscroll')
    }
    next()
  }
}
</script>
<style lang="less" scoped>
.headerBox {
  width: 100%;
  height: 70px;
  padding: 0 3%;
  // background: linear-gradient(to right, rgba(22,1,254, 100%),  rgba(118,120,252, 100%));
  background: linear-gradient(to right, rgba(22,1,254, 30%),  rgba(118,120,252, 100%));
  background: linear-gradient(to right, #2a236f,  rgba(118,120,252, 100%));
  div {
    float: left;
  }
  .logoItem {
    width: 177px;
  }
  @media screen and (min-width: 1345px) {
    .logoItem {
      width: 160px;
    }
  }
  @media screen and (max-width: 1345px) {
    .logoItem {
      width: 145px;
    }
  }
  .logoItem {
    overflow: hidden;
    height: 34px;
    margin: 18px 0;
    cursor: pointer;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .search {
    height: 100%;
    // overflow: hidden;
    width: 28%;
    margin-left: 3%;
    position: relative;
    .searchItem {
      height: 35px;
      margin: 17.5px auto;
      background: #fff;
      line-height: 35px;
      width: 100%;
      padding: 0 5px;
      box-sizing: border-box;
      i {
        padding: 0 1%;
      }
      input {
        width: 100%;
        height: 100%;
        background: none;
      }
      .searchItemImg{
        margin:6px 5px 5px 5px;
        // width: 5%;
        // height: 12px;
      }
    }
    .searchResult {
      position: absolute;
      top: 70px;
      width: 100%;
      display: none;
      .search_item {
        width: 98%;
        height: auto;
        margin: 5px 1%;
        overflow: hidden;
        .search_img {
          margin: 5px 10px;
          img{
            width: 30px;
            height: 30px;
            display: block;
          }
        }
        .searchDetail {
          .searchname {}
          .searchNum {}
        }
      }
      .search_item:nth-last-child(1) {
        border: none;
      }
    }
  }
  .navItem {
    width: 35%;
    margin: 0 5%;
  }
  @media screen and (max-width: 1345px) {
    .navItem {
      width: 35%;
      margin: 0 3%;
    }
  }
  @media screen and (max-width: 1345px) {
    .navItem {
      width: 35%;
      margin: 0 2%;
    }
  }
  .navItem {
    height: 100%;
    .navitem {
      color: #FFFFFF;
      width: 25%;
      line-height: 35px;
      margin: 17.5px auto;
      text-align: center;
      font-weight: bolder;
      font-size: 20px;
      cursor: pointer;
      .navList {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 230px;
        z-index: 99999;
        .item_nav {
          width: 100%;
        }
        .item_nav:hover {
          color: #7de9ff;
        }
        .item_nav:nth-child(6) {
          border: none;
        }
      }
    }
    // .navitem:nth-child(3):hover .navList {
    //   display: block!important;
    // }
    .navPo {
      position: relative;
    }
  }
  .walletBox {
    width: 10%;
    height: 35px;
    margin: 17.5px auto;
    float: right;
    overflow: hidden;
    .walletitem {
      width: auto;
      height: 35px;
      overflow: hidden;
      float: right;
      cursor: pointer;
      img {
      }
    }
  }
}
.isFixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
}
/deep/.el-drawer__wrapper {
  top: 70px;
}
/deep/.el-drawer {
  width: 320px!important;
  background: none!important;
}
/deep/.v-modal {
  top: 70px;
}
/deep/.el-drawer__body {
  border: 3px solid #A0F4F7;
  background: #3e3e3e;
  width: 320px;
  border-radius: 5px;
}
/deep/.el-drawer__title {
  background: none!important;
}
</style>
<style lang="less">
/deep/.v-modal {
  top: 70px;
}
</style>
